<template>
  <div class="czsj page-card">
    <h-query @search="search">
      <!-- <h-tooltip slot="btn" title="缺少删除接口" /> -->
    </h-query>
    <br>
    <a-alert class="alert-message" v-if="checked.length">
      <span slot="message">
        <span>{{ `已选择 ${checked.length} 项` }}</span>
        <span @click.stop="cancel">取消</span>
        <span color="red" @click="remove">删除</span>
      </span>
    </a-alert>
    <div class="czsj-content">
      <a-spin :spinning="loading" size="large">
        <a-row :gutter="[30, 30]">
          <a-col :span="12" v-for="item in list" :key="item.id">
            <div class="czsj-card" @click="choose(item)">
              <div class="czsj-text">
                <h1 class="ellipsis-2">{{ item.title }}</h1>
                <p>文章链接：<a @click.stop="toURL(item)">{{ item.link }}</a></p>
              </div>
              <div class="czsj-img">
                <img :src="item.img" width="100%" alt="">
              </div>
              <div class="czsj-footer">
                <div class="czsj-hot">
                  <img :src="require('@/assets/Image/icon/hot.png')" width="100%" alt="">
                </div>
                <span>{{ item.hot | hotFilter }}  热度</span>
                <span>文章来源：{{ item.source }}</span>

                <div class="czsj-checkbox">
                  <div class="czsj-checkbox--checked" v-if="checked.includes(item.id)">
                    <SvgIcon iconClass="gou" />
                  </div>
                  <!-- <h-tooltip slot="btn" title="选中是干什么的" /> -->
                </div>
              </div>
            </div>
          </a-col>
        </a-row>
      </a-spin>
      <div class="hlist-pagination" style="">
        <a-pagination v-model="current" :total="total" @change="change" />
      </div>
    </div>
  </div>
</template>
<script>
import SvgIcon from '@/components/SvgIcon.vue';
import { impArticle, delimpArticle } from '@/api/serve';

export default {
  name: 'Czsj',
  components: { SvgIcon },
  data() {
    return {
      list: [],
      checked: [],
      current: 1,
      loading: false,
      queryParams: {
        pageNo: 1,
        pageSize: 10
      },
      total: 0
    };
  },
  created() {
    this.getList();
  },
  methods: {
    search(params) {
      Object.assign(this.queryParams, params, { start: params.startTime, end: params.endTime });
      this.getList();
    },
    getList() {
      this.loading = true;
      impArticle(this.queryParams).then(res => {
        this.list = res.data.records;
        this.loading = false;
        this.total = res.data.total;
      });
    },
    change(page) {
      this.queryParams.pageNo = page;
      this.getList();
    },
    choose({ id }) {
      const value = this.checked.findIndex(e => e === id);
      console.log(id, value);
      if (value > -1) {
        this.checked.splice(value, 1);
      } else {
        this.checked.push(id);
      }
    },
    toURL({ link }) {
      window.open(link);
    },
    cancel() {
      this.checked.splice(0, this.checked.length);
    },
    remove() {
      const that = this;
      this.$confirm({
        title: '温馨提示',
        content: '确认要删除吗？',
        onOk() {
          delimpArticle({ change: that.checked }).then(res => {
            that.$message.success('删除成功');
            that.getList();
          });
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.czsj-content {
  margin-top: 20px;
  margin-left: -15px;
  width: calc(100% + 30px);
}
.czsj-card {
  height: 229px;
  background: #FFFFFF;
  box-shadow: 0px 0px 20px 0px rgba(20,15,41,0.1000);
  border-radius: 20px;
  padding: 28px 28px;
  padding-bottom: 16px;
  display: flex;
  position: relative;
  cursor: pointer;
  .czsj-text {
    flex: 1;
    margin-right: 12px;
    h1 {
      font-size: 20px;
      font-weight: bold;
      color: #333;
      line-height: 1.5;
    }
    p {
      font-size: 15px;
    }
  }
  .czsj-img {
    width: 226px;
    height: 125px;
    border-radius: 8px;
    overflow: hidden;
    img {
      display: block;
      height: 100%;
      object-fit: cover;
    }
  }

  .czsj-footer {
    position: absolute;
    bottom: 20px;
    display: flex;
    align-items: center;
    width: 94%;
    .czsj-hot {
      width: 20px;
      margin-right: 10px;
    }
    >span:nth-child(2) {
      font-size: 16px;
      font-weight: 400;
      color: #FF0101;
      line-height: 36px;
      margin-right: 33px;
    }
    >span:nth-child(3) {
      font-size: 16px;
      font-weight: 400;
      color: #666666;
      line-height: 36px;
    }
    .czsj-checkbox {
      width: 29px;
      height: 29px;
      border-radius: 100%;
      border: 1px solid #1F3B8A;
      position: absolute;
      right: 10px;
      bottom: 0;
      cursor: pointer;
      overflow: hidden;
      .czsj-checkbox--checked {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: #1F3B8A;
        color: #fff;
        font-size: 22px;
        line-height: 29px;
        text-align: center;
      }
    }
  }
}
.hlist-pagination {
  width: 100%;
  text-align: center;
  margin-top: 40px;
  margin-bottom: -10px;
}

</style>
<style lang="less">

</style>
